<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/JQuery.min.js"></script>
</head>
<body>
<div class="buttons">
    <div>
        <select name="" id="">
            <option value="">英语</option>
            <option value="">英语</option>
            <option value="">英语</option>
            <option value="">英语</option>
            <option value="">英语</option>
        </select>
        <select name="" id="">
            <option value="">黑色</option>
            <option value="">白色</option>
            <option value="">银色</option>

        </select>

        <button onclick="choseAll()">全选</button>
        <button onclick="choseNone()">取消全选</button>
        <button>保存</button>
    </div>
    <div>
        <button>扫码</button>
    </div>
</div>
<ul class="content installation">
    <li class="esc first-line">

        <span>esc</span>

    </li>
    <li class="first-line">
        <span>F1</span>

    </li>
    <li class="first-line">
        <span>F2</span>

    </li>
    <li class="first-line">
        <span>F3</span>

    </li>
    <li class="first-line">
        <span>F3</span>

    </li>
    <li class="first-line">
        <span>F5</span>

    </li>
    <li class="first-line">
        <span>F6</span>

    </li>
    <li class="first-line">
        <span>F7</span>

    </li>
    <li class="first-line">
        <span>F8</span>

    </li>
    <li class="first-line">
        <span>F9</span>

    </li>
    <li class="first-line">
        <span>F10</span>

    </li>
    <li class="first-line">
        <span>F11</span>

    </li>
    <li class="first-line">
        <span>F12</span>

    </li>
    <li class="clear-margin first-line">

        <span class="icon icon-eject"></span>

    </li>

    <li>

        <span>~</span>
    </li>
    <li>

        <span>1</span>
    </li>
    <li >

        <span>2</span>
    </li>
    <li >

        <span>3</span>
    </li>
    <li >

        <span>4</span>
    </li>
    <li >

        <span>5</span>
    </li>
    <li >

        <span>6</span>
    </li>
    <li >

        <span>7</span>
    </li>
    <li >

        <span>8</span>
    </li>
    <li >

        <span>9</span>
    </li>
    <li >

        <span>0</span>
    </li>
    <li >

        <span>-</span>
    </li>
    <li >

        <span>+</span>
    </li>
    <li class="clear-margin esc">

        <span>delete</span>
    </li>

    <li class="esc">

        <span>tab</span>
    </li>
    <li>

        <span>Q</span>
    </li>
    <li>

        <span>W</span>
    </li>
    <li>

        <span>E</span>
    </li>
    <li>

        <span>R</span>
    </li>
    <li>

        <span>T</span>
    </li>
    <li>

        <span>Y</span>
    </li>
    <li>

        <span>U</span>
    </li>
    <li>

        <span>I</span>
    </li>
    <li>

        <span>O</span>
    </li>
    <li>

        <span>P</span>
    </li>
    <li>

        <span>{</span>
    </li>
    <li>

        <span>}</span>
    </li>


    <li class="clear-margin">

        <span>|</span>
    </li>

    <li class="enter">

        <span>caps lock</span>
    </li>
    <li>

        <span>A</span>
    </li>
    <li>

        <span>S</span>
    </li>
    <li>

        <span>D</span>
    </li>
    <li>

        <span>F</span>
    </li>
    <li>

        <span>G</span>
    </li>
    <li>

        <span>H</span>
    </li>
    <li>

        <span>J</span>
    </li>
    <li>

        <span>K</span>
    </li>
    <li>

        <span>L</span>
    </li>
    <li>

        <span>:</span>
    </li>
    <li>

        <span>"</span>
    </li>
    <li class="clear-margin enter">

        <span>return</span>
    </li>

    <li class="shift">

        <span>shift</span>
    </li>
    <li>

        <span> Z</span>
    </li>
    <li>
        <span> X</span>
    </li>
    <li>

        <span> C</span>
    </li>
    <li>

        <span> V</span>
    </li>
    <li>

        <span> B</span>
    </li>
    <li>

        <span> N</span>
    </li>
    <li>

        <span> M</span>
    </li>
    <li>

        <span> <</span>
    </li>
    <li>

        <span> ></span>
    </li>
    <li>

        <span> ?</span>
    </li>
    <li class="clear-margin shift">

        <span>shift</span>

    </li>

    <li>

        <span>fn</span>
    </li>
    <li>

        <span>control</span>
    </li>
    <li>

        <span>option</span>
    </li>
    <li class="command">

        <span>command</span>
    </li>
    <li class="space">

        <span>space</span>
    </li>
    <li class="command">

        <span>command</span>
    </li>
    <li>

        <span>option</span>
    </li>
    <!--方向键-->

    <ol class="arrow-key">
        <li>
            <span class="icon icon-left"></span>

        </li>
        <li >
            <span class="icon icon-up"></span>

        </li>
        <li >
            <span class="icon icon-down"></span>

        </li>
        <li class="clear-margin">

            <span class="icon icon-right"></span>

        </li>
    </ol>
</ul>
<ul class="content material">
    <li class="esc first-line">

        <span>esc</span>

    </li>
    <li class="first-line">
        <span>F1</span>

    </li>
    <li class="first-line">
        <span>F2</span>

    </li>
    <li class="first-line">
        <span>F3</span>

    </li>
    <li class="first-line">
        <span>F3</span>

    </li>
    <li class="first-line">
        <span>F5</span>

    </li>
    <li class="first-line">
        <span>F6</span>

    </li>
    <li class="first-line">
        <span>F7</span>

    </li>
    <li class="first-line">
        <span>F8</span>

    </li>
    <li class="first-line">
        <span>F9</span>

    </li>
    <li class="first-line">
        <span>F10</span>

    </li>
    <li class="first-line">
        <span>F11</span>

    </li>
    <li class="first-line">
        <span>F12</span>

    </li>
    <li class="clear-margin first-line">

        <span class="icon icon-eject"></span>

    </li>

    <li>

        <span>~</span>
    </li>
    <li>

        <span>1</span>
    </li>
    <li >

        <span>2</span>
    </li>
    <li >

        <span>3</span>
    </li>
    <li >

        <span>4</span>
    </li>
    <li >

        <span>5</span>
    </li>
    <li >

        <span>6</span>
    </li>
    <li >

        <span>7</span>
    </li>
    <li >

        <span>8</span>
    </li>
    <li >

        <span>9</span>
    </li>
    <li >

        <span>0</span>
    </li>
    <li >

        <span>-</span>
    </li>
    <li >

        <span>+</span>
    </li>
    <li class="clear-margin esc">

        <span>delete</span>
    </li>

    <li class="esc">

        <span>tab</span>
    </li>
    <li>

        <span>Q</span>
    </li>
    <li>

        <span>W</span>
    </li>
    <li>

        <span>E</span>
    </li>
    <li>

        <span>R</span>
    </li>
    <li>

        <span>T</span>
    </li>
    <li>

        <span>Y</span>
    </li>
    <li>

        <span>U</span>
    </li>
    <li>

        <span>I</span>
    </li>
    <li>

        <span>O</span>
    </li>
    <li>

        <span>P</span>
    </li>
    <li>

        <span>{</span>
    </li>
    <li>

        <span>}</span>
    </li>


    <li class="clear-margin">

        <span>|</span>
    </li>

    <li class="enter">

        <span>caps lock</span>
    </li>
    <li>

        <span>A</span>
    </li>
    <li>

        <span>S</span>
    </li>
    <li>

        <span>D</span>
    </li>
    <li>

        <span>F</span>
    </li>
    <li>

        <span>G</span>
    </li>
    <li>

        <span>H</span>
    </li>
    <li>

        <span>J</span>
    </li>
    <li>

        <span>K</span>
    </li>
    <li>

        <span>L</span>
    </li>
    <li>

        <span>:</span>
    </li>
    <li>

        <span>"</span>
    </li>
    <li class="clear-margin enter">

        <span>return</span>
    </li>

    <li class="shift">

        <span>shift</span>
    </li>
    <li>

        <span> Z</span>
    </li>
    <li>
        <span> X</span>
    </li>
    <li>

        <span> C</span>
    </li>
    <li>

        <span> V</span>
    </li>
    <li>

        <span> B</span>
    </li>
    <li>

        <span> N</span>
    </li>
    <li>

        <span> M</span>
    </li>
    <li>

        <span> <</span>
    </li>
    <li>

        <span> ></span>
    </li>
    <li>

        <span> ?</span>
    </li>
    <li class="clear-margin shift">

        <span>shift</span>

    </li>

    <li>

        <span>fn</span>
    </li>
    <li>

        <span>control</span>
    </li>
    <li>

        <span>option</span>
    </li>
    <li class="command">

        <span>command</span>
    </li>
    <li class="space">

        <span>space</span>
    </li>
    <li class="command">

        <span>command</span>
    </li>
    <li>

        <span>option</span>
    </li>
    <!--方向键-->

    <ol class="arrow-key">
        <li>
            <span class="icon icon-left"></span>

        </li>
        <li >
            <span class="icon icon-up"></span>

        </li>
        <li >
            <span class="icon icon-down"></span>

        </li>
        <li class="clear-margin">

            <span class="icon icon-right"></span>

        </li>
    </ol>
</ul>

<script>
    window.onload=function(){
        var ali=document.getElementsByTagName('li');
        var posY =[];
        var posX=[];
        for(var i=0;i<ali.length;i++){
            posY.push(ali[i].offsetTop);
            posX.push(ali[i].offsetLeft);
        }
        for(var i=0;i<ali.length;i++){
            ali[i].style.position='absolute';
            ali[i].style.left=posX[i]+'px';
            ali[i].style.top=posY[i]+'px';
        }
    }

</script>
<script>
    function choseAll() {
        for (var i=0;i<$('.installation li').length;i++){
            if($('.installation li').eq(i).outerHeight()==56&&$('.installation li').eq(i).outerWidth()==56){
                $('.installation li').eq(i).addClass('chosen');
            }
            }
    }
    function choseNone() {
              $('.installation li').removeClass('chosen');
    }
    $(function(){
        $('.installation li').addClass('empty');
        $('.installation li').css('opacity',1);
        $('.installation li').click(function () {
                if($(this).outerHeight()==56&&$(this).outerWidth()==56){
                    $(this).toggleClass('chosen');
            }
        });

        $('.material li').click(
            function(){
                if($(this).outerHeight()==56&&$(this).outerWidth()==56){
                    var thisHtml=$(this).html();
                    $('.installation .chosen').html(thisHtml);
                    $('.installation .chosen').removeClass('empty');
                    $('.installation .chosen').removeClass('chosen');
                }
            }
        );

        $('.installation li').click(function(){
            if($(this).attr('class').length==6){
                $(this).addClass('b-color');
                $(this).css('background','#eff0f2');
            }
        });
    })
</script>
</body>
</html>